<!-- 预约设计页面 -->
<template>
	<div class="reservation-container">
		<!-- 使用抽取的顶部导航组件 -->
		<app-header />

		<!-- 添加顶部占位，避免与导航栏重叠 -->
		<div class="nav-placeholder"></div>

		<div class="reservation-content">
			<!-- 左侧蓝色背景区域 -->
			<div class="left-section">
				<div class="assessment-intro">
					<h2 class="section-title">为什么要做需求评估?</h2>
					<p class="section-desc">
						告别顾问会一对一地找到您的创业需求，为您制定专业的需求清单，让您少走弯路，同时给出合理的价格评估，为您咨询。
					</p>
				</div>
				<div class="advantage-intro">
					<h2 class="section-title">为什么上万企业选择特创易？</h2>
					<ul class="advantage-list">
						<li class="advantage-item">
							<span class="dot"></span>
							<span class="text">多方案：坚持多团队作业／多创意方案PK</span>
						</li>
						<li class="advantage-item">
							<span class="dot"></span>
							<span class="text">快出品：专业流程／系统协作／定规快</span>
						</li>
						<li class="advantage-item">
							<span class="dot"></span>
							<span class="text">好服务：方案品控／不满意返款／非质创退款</span>
						</li>
						<li class="advantage-item">
							<span class="dot"></span>
							<span class="text">省成本：定稿优惠50%／费用省50%</span>
						</li>
					</ul>
				</div>
			</div>

			<!-- 右侧表单区域 -->
			<div class="right-section">
				<!-- 顶部提示信息 -->
				<div class="top-tip">
					<template v-if="activeTab === '费用评估'">178****967提交了一个品牌设计的评估需求请求 1小时前</template>
					<template v-else>136****0651提交了一个品牌设计的评估费用申请 3小时前</template>
				</div>

				<!-- 表单标签页 -->
				<div class="form-tabs">
					<div class="tab-item" :class="{ active: activeTab === '费用评估' }" @click="activeTab = '费用评估'">
						费用评估
					</div>
					<div class="tab-item" :class="{ active: activeTab === '预约' }" @click="activeTab = '预约'">预约</div>
				</div>

				<!-- 费用评估表单 -->
				<div class="form-content" v-show="activeTab === '费用评估'">
					<!-- 需求类型选择 -->
					<div class="form-section">
						<div class="section-label">
							<span class="number">1</span>
							<span class="text">我要：</span>
						</div>
						<div class="type-options">
							<div class="type-item active">
								<div class="type-name">办公司</div>
								<div class="type-desc">企业品牌设计</div>
							</div>
							<div class="type-item">
								<div class="type-name">做产品</div>
								<div class="type-desc">产品品牌设计</div>
							</div>
							<div class="type-item">
								<div class="type-name">开门店</div>
								<div class="type-desc">店铺品牌设计</div>
							</div>
							<div class="type-item">
								<div class="type-name">其他</div>
								<div class="type-desc"></div>
							</div>
						</div>
					</div>

					<!-- 服务项目选择 -->
					<div class="form-section">
						<div class="section-label">
							<span class="number">2</span>
							<span class="text">想做：</span>
						</div>
						<div class="service-grid">
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">品牌VI设计</span>
									<span class="completion-rate">90%</span>
								</div>
								<div class="service-desc">全面建立品牌识别一致性</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">LOGO设计</span>
									<span class="completion-rate">90%</span>
								</div>
								<div class="service-desc">打造品牌认知的核心视觉符号</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">吉祥物设计</span>
									<span class="completion-rate">90%</span>
								</div>
								<div class="service-desc">品牌人格化必选</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">品牌创意</span>
									<span class="completion-rate">80%</span>
								</div>
								<div class="service-desc">品牌命名/品牌口号/品牌故事，品牌的核心文本</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">品牌策略</span>
									<span class="completion-rate">90%</span>
								</div>
								<div class="service-desc">建立清晰的品牌定位/形象定调</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">品牌理念</span>
									<span class="completion-rate">90%</span>
								</div>
								<div class="service-desc">需求品牌愿景/使命/价值观，驱动品牌长期价值增值</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">网站建设</span>
									<span class="completion-rate">70%</span>
								</div>
								<div class="service-desc">建立企业数字名片</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">品牌海报设计</span>
									<span class="completion-rate">70%</span>
								</div>
								<div class="service-desc">品牌形象全面打造</div>
							</div>
							<div class="service-item">
								<div class="service-header">
									<span class="service-name">画册设计</span>
									<span class="completion-rate">70%</span>
								</div>
								<div class="service-desc">品牌传播经典载体</div>
							</div>
						</div>
					</div>

					<!-- 需求描述 -->
					<div class="form-section">
						<a-textarea placeholder="一句话描述您的需求（选填）" :rows="4" class="requirement-textarea" />
					</div>

					<!-- 联系方式 -->
					<div class="form-section">
						<div class="section-label">
							<span class="number">3</span>
							<span class="text">联系方式：</span>
						</div>
						<div class="contact-form">
							<div class="form-row">
								<input type="text" placeholder="您的称呼" class="contact-input" />
								<input type="tel" placeholder="手机号码" class="contact-input" />
							</div>
							<button class="submit-btn">立即提交</button>
							<div class="privacy-tip">提交即代表同意《特创易服务协议》</div>
						</div>
					</div>
				</div>

				<!-- 预约表单 -->
				<div class="form-content" v-show="activeTab === '预约'">
					<div class="form-section">
						<input type="text" placeholder="请输入称呼" class="form-input" />
						<input type="tel" placeholder="请输入手机号" class="form-input" />
						<div class="service-select">
							<div class="select-label">品牌设计</div>
							<div class="select-arrow">
								<i class="el-icon-arrow-down"></i>
							</div>
						</div>
						<a-textarea placeholder="您还可以详细描述您的需求（选填）" :rows="4" class="requirement-textarea" />
						<div class="location-select">
							<label class="checkbox-label">
								<input type="checkbox" class="checkbox-input" />
								<span class="checkbox-text">到访</span>
							</label>
							<div class="location-dropdown">
								北京特创易设计服务中心
								<i class="el-icon-arrow-down"></i>
							</div>
						</div>
						<button class="submit-btn">立即提交</button>
						<div class="privacy-tip">*特创易将严格保护您的隐私，请放心填写</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import AppHeader from '@/components/Header'; // 导入头部组件

const activeTab = ref('费用评估');
</script>

<style lang="scss" scoped>
// 导入 SASS 的 color 模块
@use 'sass:color';

$primary-color: #699cee; // 定义主色调变量

.reservation-container {
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	background: #f7f8fa;
	padding-top: 0; // 移除顶部内边距
}

// 添加顶部占位区域
.nav-placeholder {
	height: 100px; // 设置足够的高度，避免内容与导航栏重叠
}

.reservation-content {
	display: flex;
	gap: 16px;
	max-width: 960px;
	padding: 16px;
	margin: 0 auto;
}

/* 左侧蓝色背景区域 */
.left-section {
	flex: 0 0 280px;
	padding: 20px;
	color: #ffffff;
	background: linear-gradient(135deg, #699cee 0%, #5b8fe6 100%);
	border-radius: 4px;

	.section-title {
		position: relative;
		padding-bottom: 8px;
		margin-bottom: 12px;
		font-size: 16px;
		font-weight: 600;

		&::after {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 16px;
			height: 2px;
			content: '';
			background: rgb(255 255 255 / 60%);
		}
	}

	.section-desc {
		margin-bottom: 24px;
		font-size: 13px;
		line-height: 1.4;
		opacity: 0.9;
	}

	.advantage-list {
		.advantage-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.dot {
				width: 3px;
				height: 3px;
				margin-right: 8px;
				background: #ffffff;
				border-radius: 50%;
			}

			.text {
				font-size: 13px;
				opacity: 0.9;
			}
		}
	}
}

/* 右侧表单区域 */
.right-section {
	flex: 1;
	padding: 16px;
	background: #ffffff;
	border-radius: 4px;

	.top-tip {
		margin-bottom: 16px;
		font-size: 12px;
		color: #999999;
	}

	.form-tabs {
		display: flex;
		margin-bottom: 20px;
		border-bottom: 1px solid #eeeeee;

		.tab-item {
			position: relative;
			padding: 8px 16px;
			font-size: 14px;
			color: #666666;
			cursor: pointer;

			&.active {
				font-weight: 500;
				color: #699cee;

				&::after {
					position: absolute;
					right: 0;
					bottom: -1px;
					left: 0;
					height: 2px;
					content: '';
					background: #699cee;
				}
			}
		}
	}

	.form-section {
		margin-bottom: 20px;

		.section-label {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.number {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 14px;
				height: 14px;
				margin-right: 5px;
				font-size: 11px;
				color: #ffffff;
				background: #699cee;
				border-radius: 50%;
			}

			.text {
				font-size: 14px;
				font-weight: 500;
				color: #333333;
			}
		}

		.type-options {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 10px;

			.type-item {
				padding: 10px;
				cursor: pointer;
				border: 1px solid #eeeeee;
				border-radius: 4px;
				transition: all 0.3s;

				&.active {
					background: #f0f7ff;
					border-color: #699cee;

					.type-name {
						color: #699cee;
					}
				}

				.type-name {
					margin-bottom: 2px;
					font-size: 13px;
					font-weight: 500;
					color: #333333;
				}

				.type-desc {
					font-size: 11px;
					color: #999999;
				}
			}
		}

		.service-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			gap: 10px;

			.service-item {
				padding: 10px;
				border: 1px solid #eeeeee;
				border-radius: 4px;
				transition: all 0.3s;

				&:hover {
					border-color: #699cee;
					box-shadow: 0 1px 4px rgb(105 156 238 / 10%);
				}

				.service-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 4px;

					.service-name {
						font-size: 13px;
						font-weight: 500;
						color: #333333;
					}

					.completion-rate {
						font-size: 12px;
						color: #699cee;
					}
				}

				.service-desc {
					font-size: 11px;
					line-height: 1.3;
					color: #666666;
				}
			}
		}
	}

	.requirement-textarea {
		width: 100%;
		height: 80px;
		padding: 8px;
		font-size: 12px;
		resize: none;
		border: 1px solid #eeeeee;
		border-radius: 4px;

		&:focus {
			border-color: #699cee;
			outline: none;
			box-shadow: 0 1px 4px rgb(105 156 238 / 10%);
		}

		&::placeholder {
			color: #999999;
		}
	}

	.contact-form {
		.form-row {
			display: flex;
			gap: 10px;
			margin-bottom: 12px;
		}

		.contact-input {
			flex: 1;
			height: 32px;
			padding: 0 12px;
			font-size: 12px;
			color: #333333;
			border: 1px solid #eeeeee;
			border-radius: 4px;
			transition: all 0.3s;

			&:focus {
				border-color: #699cee;
				outline: none;
				box-shadow: 0 1px 4px rgb(105 156 238 / 10%);
			}

			&::placeholder {
				color: #999999;
			}
		}

		.submit-btn {
			width: 100%;
			height: 36px;
			margin-bottom: 8px;
			font-size: 14px;
			color: #ffffff;
			cursor: pointer;
			background: #699cee;
			border: none;
			border-radius: 4px;
			transition: all 0.3s;

			&:hover {
				background-color: darken($primary-color, 5%);
				border-color: darken($primary-color, 5%);
			}
		}

		.privacy-tip {
			font-size: 11px;
			color: #999999;
			text-align: center;
		}
	}
}

.form-input {
	width: 100%;
	height: 40px;
	padding: 0 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: #333333;
	border: 1px solid #eeeeee;
	border-radius: 4px;

	&:focus {
		border-color: #699cee;
		outline: none;
	}

	&::placeholder {
		color: #999999;
	}
}

.service-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	margin-bottom: 16px;
	cursor: pointer;
	border: 1px solid #eeeeee;
	border-radius: 4px;

	.select-label {
		font-size: 14px;
		color: #333333;
	}

	.select-arrow {
		color: #999999;
	}
}

.location-select {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 16px 0;

	.checkbox-label {
		display: flex;
		align-items: center;
		cursor: pointer;

		.checkbox-input {
			margin-right: 4px;
		}

		.checkbox-text {
			font-size: 14px;
			color: #333333;
		}
	}

	.location-dropdown {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		height: 32px;
		padding: 0 12px;
		font-size: 14px;
		color: #333333;
		cursor: pointer;
		border: 1px solid #eeeeee;
		border-radius: 4px;

		i {
			color: #999999;
		}
	}
}

.requirement-textarea {
	margin: 16px 0;
}

.submit-btn {
	width: 100%;
	height: 40px;
	margin: 16px 0;
	font-size: 14px;
	color: #ffffff;
	cursor: pointer;
	background: #699cee;
	border: none;
	border-radius: 4px;

	&:hover {
		background-color: darken($primary-color, 5%);
		border-color: darken($primary-color, 5%);
	}
}

.privacy-tip {
	font-size: 12px;
	color: #999999;
	text-align: center;
}
</style>
